<template>
    <div>
      <div class="cell">
        <span class="titlecs">就诊人</span>
        <span style="color:rgba(179,179,179,1); float:right; padding-right:12px; vertical-align: middle;font-size: 14px;" >{{ servName }}</span>
        <hr class="full-line" align= center size="1">
      </div>
      <div class="cell">
        <span class="titlecs">总计</span>
        <span style="color: rgba(0,147,255,1); float:right; padding-right:12px; vertical-align: middle;font-size: 14px;">￥{{ price }}</span>
        <hr class="full-line" align= center size="1">
      </div>
      <div class="cell">
        <img class="imgw" :src="payWx">
        <span style="font-size:15px; margin-left:6px; vertical-align: middle;">微信支付</span>
        <hr class="full-line" align= center size="1">
      </div>

      <button type="button" class="btn" @click="submitOrder">确认支付</button>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import imgMap from '../../../static/js/imgmap.js';
    export default {
      data() {
        return {
          price: this.$route.query.price,
          orgId: this.$route.query.orgId,
          acceptUser: this.$route.query.acceptUser,
          servId: this.$route.query.servId,
          busiType: 1000112,
          payWx: imgMap.payWx,
          busiId: this.$route.query.busiId,
        }
      },

      computed: {
        ...mapGetters(['loginData']),
        servName() {
          let userInfo = this.loginData.userObj;
          let servName = userInfo.userName;
          if(!servName) {
            servName = userInfo.nickName;
          }
          return servName;
        }
      },

      methods: {
        submitOrder() {
          let vm = this;
          if(!this.busiId) {  //没有servId,下单
             let request = {acceptUser: this.acceptUser, familyId: this.loginData.userObj.familyId.value, servId: this.servId, sickName: this.servName};
            this.$indicator.open();
            this.$store.dispatch("servOrderSubmit", request).then((data) => {
                vm.busiId = data.servId.value;
                vm.wxPay();
            }).catch(e => {
              this.$toast(e.message);
              this.$indicator.close();
            });
          } else {
            this.$indicator.open();
            vm.wxPay();
          }
        },
        wxPay() {
          let vm = this;
          let request = { busiId: this.busiId, busiType: this.busiType, desp :"特色服务包",  money: this.price, moneyRmb:this.price,
            orgId: this.orgId, tradeMode :8101104, userId :this.loginData.userObj.userId.value};
          this.$store.dispatch("userConsume", request).then((data) => {
            //支付成功
            let request = data.data;
            if(request) {
              request = eval('(' + request + ")");
              vm.invokeWx(request);
            } else {
                this.$indicator.close();
                alert("支付成功");
                vm.$router.go(-2);
            }
          }).catch(e => {
            this.$toast(e.message);
          }).finally(() => {
            this.$indicator.close();
          });
        },
        onBridgeReady(request) {
          let vm = this;
          WeixinJSBridge.invoke('getBrandWCPayRequest', request, function(res){
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                alert("支付成功");
                vm.$router.go(-1);
              } else {
                alert("支付失败");
              }
            });
        },

        invokeWx(request) {
          if (typeof WeixinJSBridge == "undefined"){
            if(document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(request), false);
            }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(request));
              document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(request));
            }
          }else{
            this.onBridgeReady(request);
          }
        }
      }
    }
</script>

<style scoped>
  .cell{
    background:rgba(255,255,255,1);
    line-height: 46px;
  }

  .titlecs{
    font-size:14px;
    color:rgba(179,179,179,1);
    padding-left:12px;
    vertical-align: middle;
  }

  .imgw{
    width: 32px;
    height: 22px;
    padding-left: 12px;
    vertical-align: middle;
  }

  .btn{
    border-radius: 4px;
    text-align: center;
    font-size:12px;
    color: white;
    background-color: rgba(0,147,255,1);
    height: 40px;
    margin: 20px 10%;
    width: 80%;
    border: 1px solid transparent;
  }
</style>
